<template>
        <div>
                <van-nav-bar title="搜索页面"
                             left-text="返回"
                             right-text="..."
                             left-arrow
                             @click-left="$router.go(-1)" />

                <div class="searchbox">
                        <!-- v-model 表单数据绑定, 也是唯一一个具有双向数据绑定特点的指令 -->
                        <!-- v-model 指令主要配合表单元素使用 -->
                        <input type="text"
                               placeholder="输入关键词"
                               v-model="searchText">
                        <span @click="search()">搜索</span>
                </div>
                <div class="block">
                        <div class="title">历史搜索</div>
                        <div class="list">
                                <span v-for="(item,index) in searchArr"
                                      :key="index"> {{item}} </span>
                        </div>
                </div>
                <div class="title">搜索发现</div>
                <div class="topc">
                        <div class="top3"
                             @click="todetail(item)"
                             v-for="(item,index) in searchlist"
                             :key="index">
                                <div class="top1">
                                        <img :src="item.picUrl"
                                             alt="">

                                </div>
                                <div class="top2">
                                        <p>{{item.name}}</p>
                                        <p>{{item.monthSalesTip}}</p>
                                        <p>距您默认地址{{item.deliveryTimeTip}}</p>
                                        <p>{{item.averagePriceTip}}</p>

                                </div>
                        </div>

                </div>
        </div>
</template>

<script>
import { shop_search } from '../utils/api'
export default {
        data () {
                return {
                        searchText: '',
                        searchArr: [],
                        searchlist: [],

                }
        },
        methods: {
                search () {
                        if (this.searchlist.indexOf(this.searchText) == -1) {
                                this.searchlist.push(this.searchText) && this.searchArr.push(this.searchText);
                                // 
                                // this.searchText = '';
                        }
                        shop_search({ searchkey: this.searchText }).then((ok) => {
                                console.log(ok.data.list)
                                this.searchlist = ok.data.list;
                        })

                },

                todetail (item) {
                        this.$router.push('/detail/' + item.mtWmPoiId)
                }

        }
}





//    if (this.searchText != "") {
//                                 if (this.searchlist.indexOf(this.searchText) == -1) {
//                                         this.searchArr.push(this.searchText);
//                                         this.searchArr = Array.from(new Set(this.searchArr))
//                                         this.searchText = '';
//                                 }


//                         }

</script>

<style lang="scss" scoped>
.searchbox {
        margin: 10px;
        display: flex;
        align-items: center;
}
.searchbox input {
        flex: 1;
        height: 40px;
        background-color: #f5f5f5;
        outline: none;
        border: none;
        padding-left: 20px;
        border-radius: 20px;
}
.searchbox span {
        width: 60px;
        text-align: center;
}

.block {
        margin: 10px;
}
.block .title {
        font-weight: bold;
        padding: 10px 0;
}
.block .list span {
        display: inline-block;
        background-color: #f5f5f5;
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 10px;
        margin-bottom: 10px;
}
.title {
        font-weight: bold;
        margin-top: 30px;
        padding-left: 10px;
        // box-sizing: border-box;
}

.topc .top3 {
        // display: flex;
        margin: 10px;
        display: flex;
        // justify-content: space-between;
}
.top1 img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
}
.top2 p {
        margin-bottom: 8px;
}
.top2 {
        p:nth-child(1) {
                font-size: 18px;
                font-weight: bold;
                color: red;
        }
        p:nth-child(2) {
                font-size: 14px;
        }
        p:nth-child(3) {
                font-size: 14px;
        }
        p:nth-child(4) {
                font-size: 14px;
        }
}
.top4 {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        > span {
                background-color: #f5f5f5;
                height: 30px;
                width: 20%;
                border-radius: 20px;
                text-align: center;
                line-height: 30px;
        }
}
</style>